<template>
  <div class="component message-detail">
    <data-grid :labelWidth="100" row-key="orapId" contentAlign="left">
      <!-- <data-grid-item label="消息类型：" :span="6">{{message.type|enumConvert('reminderType')}}</data-grid-item> -->
      <data-grid-item label="日期：" :span="12" >{{message.createTime|dateTimeFormat}}</data-grid-item>
      <data-grid-item label="消息标题：" :span="12" >{{message.title}}</data-grid-item>
      <data-grid-item label="消息内容：" :span="12" >{{message.content}}</data-grid-item>
    </data-grid>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop,Watch } from "vue-property-decorator";
import { DataGrid, DataGridItem } from "@zct1989/vue-component";
import { State, Mutation, Action, namespace } from "vuex-class";
const workspaceModule = namespace("workspace")

@Component({
  components: {
    DataGrid,
    DataGridItem
  }
})
export default class MessageDetail extends Vue {
  @workspaceModule.Action private updateUnReadCount
  @Prop({ required: true, default: () => ({}) })
  private message;

  @Watch("message")
  private onMessageChange(val, oldVal) {
    if (!val) {
      return;
    }
    this.updateUnReadCount()
}
}
</script>
